<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" media="all" th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/plugins/font-awesome/css/font-awesome.min.css" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">

    <link rel="stylesheet" type="text/css" href="../../static/simditor/styles/simditor.css" th:href="@{/simditor/styles/simditor.css}"/>

    <script type="text/javascript" src="../../static/simditor/scripts/jquery.min.js" th:src="@{/simditor/scripts/jquery.min.js}"></script>
    <script type="text/javascript" src="../../static/simditor/scripts/module.js" th:src="@{/simditor/scripts/module.js}"></script>
    <script type="text/javascript" src="../../static/simditor/scripts/hotkeys.js" th:src="@{/simditor/scripts/hotkeys.js}"></script>
    <script type="text/javascript" src="../../static/simditor/scripts/uploader.js" th:src="@{/simditor/scripts/uploader.js}"></script>
    <script type="text/javascript" src="../../static/simditor/scripts/simditor.js" th:src="@{/simditor/scripts/simditor.js}"></script>

    <style>
        /* basic style */
        .close {
            /* still bad on picking color */
            background: orange;
            color: red;
            /* make a round button */
            border-radius: 12px;
            /* center text */
            line-height: 20px;
            text-align: center;
            height: 20px;
            width: 20px;
            font-size: 18px;
            padding: 1px;
        }
        /* use cross as close button */
        .close::before {
            content: "\2716";
        }
        /* place the button on top-right */
        .close {
            top: -10px;
            right: -10px;
            position: absolute;
        }
        .myimgbox{
            position: relative;
            float: left;
            margin-right: 15px
        }
    </style>

</head>
<body>
<blockquote class="layui-elem-quote">
    <a onclick="window.location.reload();" style='cursor:pointer;display: inline-block'>
        <img src="../../static/images/refresh.png" height="20" th:src="@{/images/refresh.png}"/>
    </a>&nbsp;
    <a onclick="history.go(-1);" style="color:#009688; cursor:pointer;display: inline-block;margin:5px">商品管理</a>><span style="display: inline-block;margin:5px">添加商品</span>
</blockquote>
<div style="margin-left: 15px;">



    <!--/*@thymesVar id="entity" type="com.example.demo.shops.bean.ShopBean"*/-->
    <form class="layui-form" action="" th:action="@{/Admin/shops/save}" method="post" th:object="${entity}">



        <input th:field="*{id}" th:if="*{id!=0}" type="hidden">


        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="title" autocomplete="off" placeholder="请输入分类名称" class="layui-input" th:field="*{title}"  lay-verify="required">
                </div>
            </div>
        </div>

        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label" >封面图</label>
                <div class="layui-input-block">
                    <img  width="100px" height="100px" th:src="'/upload/'+*{img}" id="img_header"/>
                    <input type="file" name="file" class="layui-upload-file">
                    <input th:field="*{img}" type="hidden" id="headerimg">
                </div>
            </div>
        </div>

        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label" >轮播图</label>

                <div class="layui-input-block" >
                    <div id="upload-images">

                        <!--/*@thymesVar id="banner" type="com.example.demo.shops.bean.ShopBannerBean"*/-->
                        <div class="myimgbox" th:each="banner:*{shopBannerBeans}" th:object="${banner}">

                            <img width='100px' height='100px' th:src='@{/upload/__*{img}__}'  />
                            <input type='hidden' th:value='*{img}' name="bannerimg"/>
                            <span class="close"></span>
                        </div>


                        <img th:src="@{/images/0.jpg}" id="imgpick"   width="100px" height="100px">
                        <input style="width: 0px;height:0px" name="file" class="layui-btn-normal" id="test" th:type="file">
                    </div>


                </div>
            </div>
        </div>



        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">商品类型</label>
                <div class="layui-input-block">
                    <select class="layui-select" lay-search th:field="*{sickTypeBean}"  id="navlevel_1" lay-filter="navlevel_1">
                        <option th:if="${typelist == null}" th:text="暂无数据" th:value="0"></option>
                        <!--/*@thymesVar id="tbean" type="com.example.demo.sicktype.bean.SickTypeBean"*/-->
                        <option th:each="tbean:${typelist}" th:text="${tbean.title}" th:value="${tbean.id}" th:unless="${typelist == null}"></option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">商品简介</label>
                <div class="layui-input-block">
                    <input type="text" name="title" autocomplete="off" placeholder="请输入商品简介" class="layui-input" th:field="*{about}"  lay-verify="required">
                </div>
            </div>
        </div>


        <div class="layui-form-item margin-left">
            <div class="layui-inline">
                <label class="layui-form-label">商品价格</label>
                <div class="layui-input-block">
                    <input type="number" name="title" autocomplete="off" placeholder="请输入商品价格" class="layui-input" th:field="*{price}"  lay-verify="required">
                </div>
            </div>
        </div>

        <!--<div class="layui-form-item margin-left">-->
            <!--<div class="layui-inline">-->
                <!--<label class="layui-form-label">排序</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<input type="number" name="title" autocomplete="off" placeholder="请输入排序"  class="layui-input" th:field="*{sort}"  lay-verify="required" >-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->


        <div>
            <fieldset class="layui-elem-field ">
                <legend>商品详情</legend>
                <div class="layui-field-box">
                    <textarea id="editor" placeholder="Balabala" autofocus th:field="*{content}"></textarea>
                </div>
            </fieldset>
        </div>


        <div class="layui-form-item margin-left">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}"></script>
<script th:inline="javascript">

    layui.use('form', function(){
        var form = layui.form();
        var $ = layui.jquery;
    });


    layui.use('upload', function(){

        layui.upload({
            url: '/upload/simupload'
            ,elem: '#test'
            ,unwrap: true
            ,success: function(res){
                if(res['success']){
                    var box = " <div class='myimgbox'> <img width='100px' height='100px' src='/upload/"+res['file_path']+"'  />   <input type='hidden' name='bannerimg' value='"+res['file_path']+"'/> <span class='close'></span> </div>"
                    $("#upload-images").prepend(box);
                    $(".close").click(function () {
                        $(this).parent().remove();
                    })
                }

            }
        });

        layui.upload({
            url: '/upload/simupload'
            ,success: function(res){
                if(res['success']){
                    $("#img_header").attr('src','/upload/'+res['file_path']);
                    $("#headerimg").val(res['file_path']);

                }

            }
        });
    });


    toolbar = ['title','bold',
        'italic',
        'underline',
        'strikethrough',
        'fontScale',
        'color',
        '|',
        'ol',
        'ul',
        'blockquote',
        'table',
        '|',
        'link',
        'image',
        'hr',
        '|',
        'indent',
        'outdent',
        'alignment'];
    var editor = new Simditor({
        textarea: $('#editor'),
        //optional options
        toolbar:toolbar,
        upload : {
            url : '/upload/simupload', //文件上传的接口地址
            params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
            fileKey: 'file', //服务器端获取文件数据的参数名
            connectionCount: 3,
            leaveConfirm: '正在上传文件'
        }
    });

    $('#imgpick').click(function(){
        $('#test').click();
    });

    $(".close").click(function () {
       $(this).parent().remove();
    })



</script>
</body>
</html>